import React from 'react';
import { Card, List, Tag, Typography, Rate } from 'antd';

const { Title } = Typography;

const HotRecommend: React.FC = () => {
  const hotProducts = [
    {
      id: 1,
      name: 'iPhone 13 128G',
      price: 2999,
      originalPrice: 5999,
      discount: '5折',
      rating: 4.8,
      sales: 156,
      category: '电子产品',
      description: '99新，仅使用3个月，全套配件齐全',
      image: 'iphone.jpg'
    },
    {
      id: 2,
      name: '考研英语全套资料',
      price: 88,
      originalPrice: 120,
      discount: '7.3折',
      rating: 4.9,
      sales: 89,
      category: '书籍资料',
      description: '包含真题、词汇、作文模板，几乎全新',
      image: 'book.jpg'
    },
    {
      id: 3,
      name: '佳能单反相机',
      price: 1200,
      originalPrice: 1800,
      discount: '6.7折',
      rating: 4.7,
      sales: 42,
      category: '电子产品',
      description: '入门级单反，适合摄影初学者',
      image: 'camera.jpg'
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>热门推荐</Title>
      
      <Card>
        <List
          itemLayout="vertical"
          size="large"
          dataSource={hotProducts}
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <img
                  width={200}
                  alt="logo"
                  src={`https://picsum.photos/200/150?${item.id * 20 + 5}`}
                />
              }
            >
              <List.Item.Meta
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <a href="#" style={{ fontSize: '18px' }}>{item.name}</a>
                    <Tag color="red">{item.discount}</Tag>
                  </div>
                }
                description={
                  <div>
                    <div style={{ marginBottom: '8px' }}>
                      <span style={{ fontSize: '20px', color: '#ff4d4f', fontWeight: 'bold' }}>
                        ¥{item.price}
                      </span>
                      <span style={{ textDecoration: 'line-through', color: '#999', marginLeft: '8px' }}>
                        ¥{item.originalPrice}
                      </span>
                    </div>
                    <div style={{ marginBottom: '8px' }}>
                      <Rate disabled defaultValue={item.rating} />
                      <span style={{ marginLeft: '8px', color: '#ffa940' }}>{item.rating}</span>
                      <span style={{ marginLeft: '16px', color: '#999' }}>已售{item.sales}件</span>
                    </div>
                    <div style={{ color: '#666', marginBottom: '8px' }}>
                      {item.description}
                    </div>
                    <Tag color="blue">{item.category}</Tag>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default HotRecommend;